@charset "iso-8859-1";

/*******************************************************************************
*  rMenu.css : 2006.09.18
* -----------------------------------------------------------------------------
* Ruthsarian Menus - A CSS-based dropdown menu system
*
* <insert long, boring ramble here>
*
* NOTES
*	- Setting position: relative; to ul.rMenu triggers a bug in Netscape 7
*	  and earlier that makes content jump as menus pop
*	- Need to remember that when assigning multiple classes to an element
*	  to list them left-to-right from most-specific to least-specific.
*	  Otherwise IE/Mac flips out
*	- IE/Mac needs whitespace before <UL> and </UL> tags in the markup
*	  otherwise very odd things can happen
*
* EXAMPLE HTML
*	<ul class="rMenu rMenu-h"
*	  ><li
*	    ><a href="">Menu Item</a
*	    > <ul class="rMenu-v"
*	      ><li
*	        ><a href="">Menu Item</a
*	      ></li
*	      ><li
*	        ><a href="">Menu Item</a
*	      ></li
*	    > </ul
*	  ></li
*	  ><li
*	    ><a href="">Menu Item</a
*	  ></li
*	 > </ul>
*
*******************************************************************************/

/*******************************************************************************
 * General Menu Mechanics
 *
 * Below is a set of rules which is applicable to any list used within
 * this dropdown menu system. You could apply just these rules and get
 * a basic dropdown menu system working just fine in FireFox, Opera,
 * Safari, and most other modern browsers. IE6 and earlier.. not so much.
 */
ul.rMenu, ul.rMenu ul, ul.rMenu li
{
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.rMenu ul
{
	position: absolute;	/* removes the UL element from the flow of the 
				   document. this means the browser won't make room
				   in the layout for whever this element is to 
				   appear. */
	display: none;		/* hide it by default until its parent  LI element
				   enters the :hover state (has focus) */
}
ul.rMenu li
{
	z-index: 1;
	position: relative;	/* needed so sub-menus pop relative to their
				   the parent menu item */
}
ul.rMenu li:hover
{
	z-index: 2;
}
ul.rMenu li:hover > ul
{
	display: block;
	z-index: 3;
}
ul.rMenu li a
{
	display: block;
	cursor: pointer;
}
ul.rMenu:after
{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/*******************************************************************************
 * Vertical Menu Mechanics
 * 
 * Below are rules that apply to vertical menus only
 *
 * NOTE: the rMenu-vWide class is for vertical menus that should take whatever
 *       width they can get (width: auto) rather than a fixed width 
 *       (width: 15em). This is something that should only be applied to your
 *       topmost menu level. Anything deeper in the menu tree will look
 *       horrible.
 */
ul.rMenu-v, ul.rMenu-v ul
{
	width: 10em;
}

/*******************************************************************************
 * Drop Positions
 *
 * The rules below allow you to define where dropmenus appear relative to their
 * parent LI element. The first few rules will define default positions for
 * drop menus. After that will be special custom positioning classes. You must
 * specifically set the class to each and every UL element you want to drop
 * in that special position. There is no cascading effect here because it leads
 * to a host of problems.
 *
 * DEV NOTE: use left/right to control alignment and margins to setup dropdown
 *           overlapping
 */

/* default drop position, immediately below the parent element
 * with the left edge of aligned with parent's left edge
 */
ul.rMenu ul
{
	margin: 1px 0 0 0;	/* the 1px top margin is there to align
				   the top border of the dropdown menu
				   with the bototm border of the parent
				   element. the menu isn't aligned properly
				   by default because of the negative
				   margins used to get LI element borders
				   to overlap. */
	top: auto;
	left: 0;
}

/* Children of vertical menus should overlap the parent in a style that
 * conveys hierarchy
 */
ul.rMenu-v ul
{
	margin-top: -10px;
	margin-left: 90%;
}

/*******************************************************************************
 * Visual Style
 *
 * This block of style should try to contain all visual-presentation related
 * rules. Colors, font family, etc.
 *
 * A note on borders:
 *	Where borders for each menu item get drawn is a bit tricky. If you
 * draw all four sides of the border for each element then you need to overlap
 * elements so that you don't get double-wide borders where elements touch. To
 * overlap elements use negative margins. But some browsers hiccup when you put
 * negative margins on certain elements. Another approach is to apply borders
 * to just the bottom and right sides of each LI element and thend raw the
 * top and left borders of the containing UL element. This works really really
 * well. Except in the case of horizontal menus. If you want the horizontal
 * borders of your horizontal menu to carry across the entire width of the
 * page, then the above method works great. But if you don't want that border
 * then you're stuck drawing the border on the LI elements. So to that end,
 * I've employed the negative margin method. I've found the best results to
 * be when the borders are drawn on the LI elements and not the anchor 
 * elemenets.
 */
ul.rMenu li
{
	border: solid 1px #99f;
	margin: -1px;	/* negative margins to get borders to overlap
				   where elements touch. */
}
ul.rMenu li a
{
	/* NOTE: do not define a background color here, otherwise the 2-tier
	 *       color system used below will not work.
	 */
	color: #009;
	text-decoration: none;
	padding: 2px 5px 3px 5px;	/* padding is applied here and not the 
					   parent LI element because we want
					   the whole area of the menu item to
					   be selectable and not just the area
					   2 or 3 pixels from the border. */
}
ul.rMenu li a:hover
{
	background-color: #ffc;	/* the background color of menu items that the
				   user's mouse is immediately over */
}
ul.rMenu li
{
	background-color: #ddf;	/* default background color of menu items when
				   not having focus from the user */
}
ul.rMenu li:hover
{
	background-color: #eda;	/* the background color of a menu item whose
				   child menu currently has focus. this allows
				   you to visually indicate the path the user
				   took to get to their current menu
				   menu selection */
}


/*******************************************************************************
 *	
 *
 * CSS targeted at a single menu as a means to demonstrate and debug issues with
 * dropdown menus for the given platform.
 */
#menu-01 li
{
	width: 10em;
}

#menu-02 li
{
	width: 10em;
	float: left;
	clear: left;
}

#menu-03 li
{
	width: auto;
}

#menu-04 li a
{
	zoom: 1;
}

#menu-05 li
{
	margin: 0;
}
#menu-05 li, #menu-05 ul.rMenu-v li
{
	margin-bottom: -1px;
}
#menu-05 li a
{
	width: auto;
	min-width: 0;
}

#menu-06 ul
{
	background-color: #fff;
}
#menu-06 li
{
	margin: 0;
}
#menu-06 li, #menu-06 ul.rMenu-v li
{
	margin-bottom: -1px;
}
#menu-06 li a
{
	width: auto;
	min-width: 0;
}

/******************************************************************************/